<template>
	<view class="body-view">
		<!--导航和状态栏-->
		<view class="state-navigation">
			<view class="slim_header_navigation d-flex a-center j-center" >
				<view class="left_box" @tap="goBack">
					<image src="/static/center/back.png" class="back"></image>
				</view>
				<view class="title">群方案</view>
				<view class="right_box" v-if="pageData.list.length&&(role === 'Admin' || role === 'Owner')" @tap="goEditProgramme">
                    <text style="font-size:30rpx;font-weight:400;color:#1DC691;">管理</text>
					<!-- <image src="/static/center/dian.png" class="dian"></image> -->
				</view>
			</view>
		</view>
		<view  class="content" style="top: calc(100rpx + var(--status-bar-height))" :style="{bottom:bottomHeight+'px'}">
		<!-- 顶部位置占位 -->
			<pullScroolView
                v-if="pageData.list?.length > 0"
                class="scr"
				ref="scroll" 
				:back-top="false" 
				:pullDown="refresh" 
				:pullUp="scrolltolower">
				<view class="scrool-view d-flex wrap j-between">
					<view v-for="item in pageData.list" @tap="goProgrammDetails(item.id)" class="scrool-cell">
						<!-- <view v-if="item.inUse==1" class="in-use">使用中</view> -->
						<view class="page-view d-flex a-center j-center">
							<view class="page-view-number">{{item.pageView}}</view>
							<i class="icon icon-zhanshifanwei" style="font-size: 25rpx; color: #FFFFFF;line-height: 33;"></i>
						</view>
						<image class="cell-img" :src="item.photo"></image>
						<view class="cell-info d-flex a-center j-between">
							<view class="info-name" style="width:340rpx;">{{item.name}}</view>
							<!-- <view class="info-collect d-flex a-center">
								<i class="icon icon-aixin" style="font-size: 30rpx;color: #1DC691;"></i>
								<view class="info-collect-number">{{item.favoritesCount}}</view>
							</view> -->
						</view>
						<view class="cell-introduction">{{formatIntroduction(item.introduction)}}</view>
					</view>
                    
				</view>
			</pullScroolView>
			<view class="bottom-btn d-flex d-c j-center" v-if="role === 'Admin' || role === 'Owner'">
				<tm-button
					_style="margin: 0;font-weight: 600;"
					:width="690"
					:height="80"
					:shadow="-1"
					round="5"
					:linear-color="['#64F1C5', '#29DBA3']"
					linear="left"
					:fontSize="32"
					fontColor="#ffffff"
					label="添加方案"
					@tap="goProgramme"
				></tm-button>

                <view class="heightBox"></view>
			</view>
		</view>
		<view v-if="pageData.list?.length === 0" class="page-null d-flex d-c a-center j-center">
			<image mode="widthFix" style="width: 360rpx;" src="/static/img/nodata.png" />
			<view class="page-null-text">{{emptyText}}</view>
			<!-- <tm-button
				_style="margin: 40rpx 0 0 0;font-weight: 600;"
				:width="390"
				:height="80"
				:shadow="-1"
				round="5"
				:fontSize="32"
				color="#29DBA3"
				:outlined="true"
				fontColor="#29DBA3"
				label="去方案广场"
			></tm-button> -->
		</view>

	</view>
</template>

<script setup lang="tsx" name="programme">
import { userData as userDataStore } from "@/store/userData";
import { computed, ref } from "vue";
import { onLoad,onShow } from '@dcloudio/uni-app';
import { getGroupPlan } from "@/api/api";
import {
    getGroupProfile,
} from "@/hooks/imHooks";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
const systemInfo = systemInfoStore();
const goBack = () => {
	uni.navigateBack();
};
const userData: any = userDataStore();
let pageData:any = ref({});
let params:any = {
	groupId:null,
	//userId:10000013,
	page:1,
	rows:10
}

const bottomHeight = computed(()=>{
    if(role.value === 'Admin' || role.value === 'Owner'){
         return systemInfo.safeAreaInsets?.bottom?(systemInfo.safeAreaInsets?.bottom+uni.upx2px(100)) : uni.upx2px(130)
    }else{
        return 0;
    }


})
//页面加载完成后加载初始数据
onLoad((option) => {
    if(option.groupId){
        groupId.value = option.groupId;
        params.groupId = groupId.value;
        refresh();
        GetGroupProfile(groupId.value);
    }
});
onShow(() => {
	refresh();
});
const scroll = ref();
//下拉刷新数据
const refresh = () => {
	params.page = 1;//设置刷新时查询第一页
	getGroupPlan(params).then((res: any) => {
		if(res.success){
			params.page++;//设置下一页
            console.log(res.data);
			pageData.value = res.data;
			setTimeout(()=>{
			    scroll.value.success();
			},500);
		}
	}); 
}
//下拉加载
const scrolltolower = () => {
	if(params.page>=pageData.value.pages)return;
	getUserPlanList(params).then((res: any) => {
		params.page++;//设置下一页
		pageData.value.list.push(...res.data.list)
	});
} 
const goProgramme = () => {
	uni.navigateTo({
	    url: `/pages/programme/programme?type=pick&groupId=${groupId.value}`,
	});
}

const goEditProgramme = () => {
	uni.navigateTo({
	    url: `/pages/programme/delprogramme?type=pick&groupId=${groupId.value}`,
	});
}
const goProgrammDetails = (id:string) => {
	uni.navigateTo({
	    url: `/pages/programmeDetails/programmeDetails?programmeId=${id}&from=group`,
	});
}
const formatIntroduction = (str:string) => {

    if(!str){
        return '';
    }

	return str.replace(/\n/g, '').replace(/\s/g, '');  
}


const role = ref('Member');
const groupId = ref('');

const emptyText = computed(()=>{
    if(role.value === 'Admin' || role.value === 'Owner'){
        return '群还没有瘦身方案,您可以将方案添加到这里，以供群内胖友查看并使用'
    }

    return '群还没有瘦身方案'
})


const GetGroupProfile = async (groupId: string) => {
    if (!uni.$chat_isSDKReady) {
        setTimeout(() => {
            GetGroupProfile(groupId);
        }, 200);
        return;
    }
    const res: any = await getGroupProfile(groupId);
    const { code, data } = res;
    if (code !== 0) {
        uni.showToast({
            icon: "none",
            title: "获取群信息失败",
            duration: 1500,
        });
        return;
    }

    //groupProfile.value = data.group;

    // data.group.selfInfo.memberCustomField.forEach((item) => {
    //     const { key, value } = item;
    //     if (key === "group_nick") {
    //         group_nick.value = value;
    //     }
    // });

    // nameCard.value = data.group.selfInfo.nameCard;

    role.value = data.group.selfInfo.role;

    // IM_STORE.conversationList.forEach((item, index) => {
    //     if (
    //         item.type === "GROUP" &&
    //         item.groupProfile.groupID === data.group.groupID
    //     ) {
    //         IM_STORE.updateConversationListGroupProfile({
    //             value: data.group,
    //         });
    //     }
    // });
    // IM_STORE.groupList.forEach((item, index) => {
    //     if (item.groupID === data.group.groupID) {
    //         IM_STORE.updateGroupListByIndex({ index, value: data.group });
    //     }
    // });

    // if (
    //     IM_STORE.conversation.type === "GROUP" &&
    //     IM_STORE.conversation.groupProfile.groupID === data.group.groupID
    // ) {
    //     IM_STORE.updateConversationGroupProfile(data.group);
    //     uni.$emit("groupListUpdate");
    // }
};

</script>

<style lang="scss" scoped>
@import './programme.scss';
.heightBox {
        height: env(safe-area-inset-bottom);
        width:750rpx;
        min-height: 20rpx;
    }
.content{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    .scr{
        flex:1;
    }

}
</style>
